@import "modules/animate.css";

@mixin clearfix{
    content: "";
    clear: both;
    line-height: 0;
    overflow: hidden;
    visibility: hidden;
    display: table;
    zoom: 1;
}

.shutter-container{
    width: 100%;
    height: 500px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 0;
    left: 0;
    background-color: #fff;
    .shutter-slide{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            position: absolute;
            visibility: hidden;
            z-index: -1000;
            top: -10000px;
            left: -10000px;
        }
        &.active{
            z-index: 2;
        }
        &.next{
            z-index: 1;
        }
    }
    .shutter-slide-cell{
        top: 0;
        left: 0;
        width: 20%;
        height: 33.3333333333333333%;
        overflow: hidden;
        position: absolute;
        box-sizing: border-box;
        background-color: #fff;
        > *{
            position: absolute;
            width: 100%;
            height: 100%;
        }
    }
    &.shutter-bordered{
        &:after{
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            width: 100%;
            height: 100%;
            border-top: 1px solid #fff;
            border-left: 1px solid #fff;
            z-index: 100;
        }
        .shutter-slide-cell{
            &:before{
                content: '';
                position: absolute;
                top: -1px;
                left: -1px;
                width: 100%;
                height: 100%;
                border-right: 1px solid #fff;
                border-bottom: 1px solid #fff;
                z-index: 100;
            }
        }
    }
}
/*@keyframes easeInBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,-100%,0);
    }
    36%{
        transform: translate3d(0,0,0);
    }
    54%{
        transform: translate3d(0,-20%,0);
    }
    72%{
        transform: translate3d(0,0,0);
    }
    82%{
        transform: translate3d(0,-5%,0);
    }
    92%{
        transform: translate3d(0,0,0);
    }
    96%{
        transform: translate3d(0,1%,0);
    }
    100%{
        transform: translate3d(0,0,0);
    }
}
@keyframes easeOutBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,0,0);
    }
    36%{
        transform: translate3d(0,100%,0);
    }
    54%{
        transform: translate3d(0,80%,0);
    }
    72%{
        transform: translate3d(0,100%,0);
    }
    82%{
        transform: translate3d(0,95%,0);
    }
    92%{
        transform: translate3d(0,100%,0);
    }
    96%{
        transform: translate3d(0,99%,0);
    }
    100%{
        transform: translate3d(0,100%,0);
    }
}*/
/*@keyframes easeInBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,-100%,0);
    }
    70%{
        transform: translate3d(0,0,0);
    }
    85%{
        transform: translate3d(0,-10%,0);
    }
    100%{
        transform: translate3d(0,0,0);
    }
}
@keyframes easeOutBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,0,0);
    }
    70%{
        transform: translate3d(0,100%,0);
    }
    85%{
        transform: translate3d(0,90%,0);
    }
    100%{
        transform: translate3d(0,100%,0);
    }
}*/
/*@keyframes easeInBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        //top: -100%;
        transform: translate3d(0,-100%,0);
    }
    70%{
        //top: 0;
        transform: translate3d(0,0,0);
    }
    85%{
        //top: -10%;
        transform: translate3d(0,-10%,0);
    }
    100%{
        //top: 0;
        transform: translate3d(0,0,0);
    }
}
@keyframes easeOutBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        //top: 0;
        transform: translate3d(0,0,0);
    }
    70%{
        //top: 100%;
        transform: translate3d(0,100%,0);
    }
    85%{
        //top: 90%;
        transform: translate3d(0,90%,0);
    }
    100%{
        //top: 100%;
        transform: translate3d(0,100%,0);
    }
}*/
@keyframes easeInBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,-100%,0);
    }
    44%{
        transform: translate3d(0,0,0);
    }
    62%{
        transform: translate3d(0,-20%,0);
    }
    80%{
        transform: translate3d(0,0,0);
    }
    90%{
        transform: translate3d(0,-5%,0);
    }
    100%{
        transform: translate3d(0,0,0);
    }
}
@keyframes easeOutBounce {
    0%{
        animation-timing-function: cubic-bezier(.41,.05,.52,.28);
        transform: translate3d(0,0,0);
    }
    44%{
        transform: translate3d(0,100%,0);
    }
    62%{
        transform: translate3d(0,80%,0);
    }
    80%{
        transform: translate3d(0,100%,0);
    }
    90%{
        transform: translate3d(0,95%,0);
    }
    100%{
        transform: translate3d(0,100%,0);
    }
}
.child{
    background-color: transparent;
}
.easeOutBounce1{
    .shutter-slide{
        .shutter-slide-cell{
            background-color: transparent;
        }
    }
    .shutter-slide.active{
        .shutter-slide-cell div{
            animation-name: easeOutBounce;
            //animation-timing-function: ease-in;
            //animation-duration: 0.7s;
            @extend .animated;
        }
    }
    .shutter-slide.next{
        .shutter-slide-cell div{
            animation-name: easeInBounce;
            //animation-timing-function: ease-in;
            //animation-duration: 0.7s;
            @extend .animated;
        }
    }
}

.slideIn1{
    .shutter-slide{
        .shutter-slide-cell{
            background-color: transparent;
        }
    }
    .shutter-slide.active{
        .shutter-slide-cell div{
            animation-name: slideOutRight;
            animation-duration: 0.7s;
            @extend .animated;
        }
    }
    .shutter-slide.next{
        .shutter-slide-cell div{
            animation-name: slideInLeft;
            animation-duration: 0.7s;
            @extend .animated;
        }
    }
}